<template>
  <div class="file_msg">
    <div class="file_top">
      <i class="iconfont icon-04"></i>
      <el-text :title="messageContent" truncated style="max-width: 10rem" class="name">
        {{ messageContent }}
      </el-text>
    </div>
    <div class="file_bottom">
      <span class="kb"
        >{{(fileSize / 1024 / 1024).toFixed(2) }} M</span
      >
      <a class="button" :href="ip + messageContent" >
        <el-button size="small" type="info" plain>下载</el-button>
      </a>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  messageContent: {
    type: String,
  },
  fileSize: {
    type: Number,
  },
});

const ip = import.meta.env.VITE_APP_ACCESS_IP;
</script>

<style lang="scss" scoped>
.file_msg {
  border-radius: 5px;
  border: 1px solid #ddd;
  width: 180px;
  height: 90px;
  background: #eaeaea;

  .file_top {
    padding: 20px 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 15px;
    }

    .name {
      margin-left: 5px;
      height: 16px;
    }
  }

  .file_bottom {
    display: flex;
    justify-content: space-between;
    .kb {
      margin-top: 10px;
      margin-left: 5px;
      font-size: 10px;
    }
    .button {
      margin-top: 4px;
      margin-right: 5px;
    }
  }
}
</style>
